<template>
  <div>
    <!-- 功能按钮 -->
    <el-button
      type="primary"
      v-for="i in $store.state.user.menulist[this.$route.path]"
      :key="i.id"
      @click="btn(i.code)"
      >{{ i.name }}</el-button
    >
    <!--  {{ this.$store.state.user.menulist[this.$route.path] }} -->
    <!-- table表格 -->
    <!-- <div v-if="tableData">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="300"
        @cell-click="celltable"
        :highlight-current-row="true"
      >
        
      </el-table> -->
    <div v-if="tableData" style="padding: 20px 0">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'children' }"
        @cell-click="celltable"
        :highlight-current-row="true"
      >
        <el-table-column prop="fullname" label="部门全称" sortable>
        </el-table-column>
        <el-table-column prop="simplename" label="部门简称" sortable>
        </el-table-column>
        <el-table-column prop="id" label="当前部门id"> </el-table-column>
      </el-table>
    </div>
    <!-- 功能组件 -->
    <add
      :type="tabletype.deptAdd"
      :fun="cleartype"
      :tname="'deptAdd'"
      :tablerow="tablerow"
    ></add>
    <edit
      :type="tabletype.deptEdit"
      :fun="cleartype"
      :tname="'deptEdit'"
      :tablerow="tablerow"
    ></edit>
    <dept-delete
      :type="tabletype.deptDelete"
      :fun="cleartype"
      :tname="'deptDelete'"
      :tablerow="tablerow"
    ></dept-delete>
  </div>
</template>

<script>
// 引入网络请求的组价
import { http, deptlist } from "../../api/api";
// 引入添加功能的组件
import Add from "./Add"; //添加部门
import Edit from "./Edit"; //修改部门
import DeptDelect from "./DeptDelete"; // 删除部门
import DeptDelete from "./DeptDelete.vue";
export default {
  data() {
    return {
      tableData: "", //用户列表数据
      names: "", //搜索的名字
      // 单元格选择的对象
      tablerow: "",
      // 选择的对象
      tabletype: {
        deptAdd: false, // 添加部门
        deptEdit: false, //修改部门
        deptDelete: false, //删除部门
      },
    };
  },
  components: {
    Add,
    Edit,
    DeptDelete,
  },
  mounted() {
    this.getuserlist();
  },
  methods: {
    // 将tabletype中的地址值变成false状态，关闭模态框
    cleartype(type) {
      this.tabletype[type] = false;
      this.getuserlist(this.page);
      this.tablerow = "";
    },
    // 选择单元格触发的事件
    celltable(row) {
      this.tablerow = row;
      console.log(row);
    },
    // 统一的功能按钮
    btn(a) {
      console.log(a);
      if (a == "deptAdd") {
        this.tabletype[a] = true;
      } else {
        if (this.tablerow == "") {
          this.$message.error("请选择要操作的用户");
        } else {
          if (a == "mgrFreeze") {
            if (this.tablerow.statusName == "冻结") {
              this.$message.error("该用户账号已经冻结");
            } else {
              this.tabletype[a] = true;
            }
          } else if (a == "mgrUnfreeze") {
            if (this.tablerow.statusName == "启用") {
              this.$message.error("该用户账号已经启用");
            } else {
              this.tabletype[a] = true;
            }
          } else {
            this.tabletype[a] = true;
          }
        }
      }
    },
    // 网络请求列表数量
    getuserlist() {
      // 开启动画
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      this.$http.get(http + deptlist).then(
        (data) => {
          if (data.data.msg == "成功") {
            // 得到的用户的表格信息
            this.tableData = data.data.data;
            // 关闭动画
            setTimeout(() => {
              loading.close();
            }, 1000);
          } else {
            this.$message.error(data.data.message);
          }
        },
        (err) => {
          this.$message.error(err.data.message);
        }
      );
    },
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>